<template>
<div>
  <div id="status-info">
    <div>服务端状态: <span :class="status[0]">{{status[1]}}</span></div>
    <div>速度: <span>{{speed}}</span></div>
    <div>播放状态: <span>{{isPlay?'播放':'暂停'}}</span></div>
  </div>
  <!-- 控制条 -->
  <div id="controller">
    <el-button type="primary" @click="displayStatus.textPanel = true">打开文件</el-button>
    <el-button type="primary" @click="togglePlay">播放/暂停</el-button>
    <el-button type="primary" @click="speedUp">加速</el-button>
    <el-button type="primary" @click="speedDown">减速</el-button>
    <el-button type="primary" @click="speedReserve">反向播放</el-button>
    <el-button type="primary" @click="reset">重置</el-button>
    <el-button type="primary" @click="displayStatus.settings = true">设置</el-button>
    <el-button type="primary" @click="start">启动提词器</el-button>
  </div>
  <!-- 快速调节 -->
  <div id="quick-change">
    <div>
      <span>速度:</span>
      <el-button @click="speed = 0.6">0.6 (100号字)</el-button>
      <el-button @click="speed = 1.5">1.5 (150号字)</el-button>
    </div>
  </div>
  <!-- 监视器 -->
  <div id="prompter-outer" :style="{'width': `${config.weight/2}px`, 'height': `${config.height/2}px`}">
    <div class="prompter-view" :style="{'width': `${config.weight}px`, 'height': `${config.height}px`, 'font-size': `${config.fontSize}px`}">
      <div ref="prompterText" class="prompter-text" :style="{'width': `${config.weight}px`, 'transform': `translateY(-${posY}px)`}">{{text}}</div>
    </div>
  </div>
  <div>
    <span>显示器图像监视</span><br>
    <video id="video" src="" ref="video"></video>
  </div>
  <setting v-if="displayStatus.settings" :config="config" :ws="ws" @autoResize="getScreen" @save="saveConfig" />
  <text-reader v-if="displayStatus.textPanel" @save="updateText" @close="displayStatus.textPanel = false" />
</div>
</template>

<script>
import Setting from '../components/Setting.vue';
import TextReader from "../components/TextReader";



export default {
  name: "Console",
  data() {
    return {
      status: ['s-red', '未连接'],
      isPlay: false,
      posY: 0,
      config: {
        weight: 1000,
        height: 400,
        fontSize: 100
      },
      text: "TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT",
      timer: -1,
      speed: 1,
      ws: -1,
      txtHide: true,
      txtInput: '',
      displayStatus: {
        settings: false,
        textPanel: false
      }
    }
  },
  components: {
    TextReader,
    Setting
  },
  mounted() {
    // Connect Websocket Server
    this.ws = new WebSocket('ws://localhost:12300');
    this.ws.onopen = () => {
      let json = {type: 'handshake', data: {model: 'server'}}
      this.ws.send(JSON.stringify(json))
      this.syncText()
      this.status = ['s-green', '正常']
    }
    // Message Action
    this.ws.onmessage = e => {
      let json = JSON.parse(e.data)
      if (json.type === 'responseSize') {
        this.config.weight = json.data.width
        this.config.height = json.data.height
        console.log(json.data)
        this.sync()
        this.syncText()
      }
    }
    // 屏幕监视器
  },
  methods: {
    // Toggle Play Status
    togglePlay() {
      if (this.isPlay) {
        clearInterval(this.timer)
        this.timer = -1
        this.isPlay = false
      }else if (this.timer === -1) {
        this.timer = setInterval(() => {
          let nPos = this.posY + this.speed
          if (nPos >= this.$refs.prompterText.offsetHeight - this.config.height / 2 || nPos <= 0) {
            this.togglePlay()
          }
          this.posY = nPos
          let json = {type: 'position', data: nPos}
          this.ws.send(JSON.stringify(json))
        }, 10)
        this.isPlay = true
      }
    },
    // Speed Change
    speedUp() {
      this.speed += 0.1
    },

    speedDown() {
      this.speed -= 0.1
    },

    // Reserve Speed
    speedReserve() {
      this.speed = -this.speed
    },

    // Sync Text To Client
    syncText() {
      let json = {
        type: 'text',
        data: this.text
      }
      this.ws.send(JSON.stringify(json))
    },

    // Get Screen
    getScreen() {
      let json = {
        type: 'getScreen'
      }
      this.ws.send(JSON.stringify(json))
    },

    // GetFile Text
    readText(event) {
      let _this = this
      let input = event.target;
      let reader = new FileReader();
      reader.onload = function() {
        if(reader.result) {
          //显示文件内容
          _this.text = reader.result
          _this.syncText()
        }
      };
      reader.readAsText(input.files[0]);
    },

    // Add Text
    addTxt() {
      this.txtHide = false
      this.txtInput = this.text
    },

    // Submit Input
    txtSubmit() {
      this.text = this.txtInput
      this.txtHide = true
      this.syncText()
    },

    hide() {
      this.txtHide = true
    },

    reset() {
      this.posY = 0
      let json = {type: 'position', data: 0}
      this.ws.send(JSON.stringify(json))
    },

    sync() {

      let json = {
        type: 'config',
        data: {
          weight: this.config.weight,
          height: this.config.height,
          fontSize: this.config.fontSize
        }
      }
      this.ws.send(JSON.stringify(json))
    },

    saveConfig(config) {
      this.config = config
      this.sync()
      this.displayStatus.settings = false
    },

    updateText(text) {
      this.text = text
      this.syncText()
    },

    start() {
      window.ipcRenderer.send('openTele', null)
    }
  }
}
</script>

<style scoped>
.prompter-view {
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
  transform: scale(0.5) translate(-50%, -50%);
}

#controller {
  margin: 10px;
}

#quick-change {
  margin: 10px;
}

#status-info {
  margin: 10px 0;
  display: flex;
}

#status-info div {
  margin: 0 10px;
}

.prompter-text {
  overflow: auto;
  word-wrap: anywhere;
  transform: rotateY(180deg);
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-input {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.text-input textarea {
  width: 50vw;
  height: 50vh;
}


#video {
  width: 600px;
}

#prompter-outer {
 overflow: hidden; 
}

.s-red {
  color: red;
}

.s-green {
  color: green;
}
</style>